<template>
    <div class="boxContentCss">
        <el-form ref="formRef" :model="form" label-position="right" label-width="auto">
            <EdCreateCard title="基本信息">
                <template #back>
                    <div class="createBack" @click="$utilsSet.goBack($router)" >
                        <svg-icon icon-class="back" /> 返回
                    </div>
                </template>
                <div class="zh_flex">
                    <el-form-item label="公司名称" class="width-m25" prop="orgName" :rules="$validate.validates({required:true,msg:'公司名称不能为空'})">
                        <el-input class="flex-input" placeholder="请输入" v-model="form.orgName" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="平台有效期" class="width-m25" prop="validTime">
                        <!-- <EdDateTimePicker v-model="form.validTime" ref="edDateTimePickerRef" :pickerParams="pickerParams" @emit-echo-time-date="emitEchoTimeDate($event, 'validTime')"></EdDateTimePicker> -->
                        <el-date-picker v-model="form.validTime" type="date" placeholder="选择日期" :format="pickerParams.valueFormat" :value-format="pickerParams.valueFormat" @change="emitEchoTimeDate($event, 'validTime')"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="注册资本" class="width-m25 money_class" prop="registerMoney" :rules="$validate.validates({ type: 'number' })">
                        <el-input class="flex-input" placeholder="请输入" maxlength="20" v-model="form.registerMoney">
                            <!-- <template slot="append">万元</template> -->
                            <i slot="suffix" style="font-style:normal;margin-right: 10px;">万元</i>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="成立时间" class="width-m25" prop="foundedTime">
                        <!-- <EdDateTimePicker v-model="form.foundedTime" ref="edDateTimePickerRef" :pickerParams="pickerParams" @emit-echo-time-date="emitEchoTimeDate($event, 'foundedTime')"></EdDateTimePicker> -->
                        <el-date-picker v-model="form.foundedTime" type="date" placeholder="选择日期" :format="pickerParams.valueFormat" :value-format="pickerParams.valueFormat" @change="emitEchoTimeDate($event, 'foundedTime')"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="法定代表人" class="width-m25" prop="legalPerson">
                        <el-input class="flex-input" placeholder="请输入" v-model="form.legalPerson" maxlength="5"></el-input>
                    </el-form-item>
                    <el-form-item label="营业期限" class="width-m25" prop="licenseTime">
                        <!-- <EdDateTimePicker v-model="form.licenseTime" ref="edDateTimePickerRef" :pickerParams="pickerParams" @emit-echo-time-date="emitEchoTimeDate($event, 'licenseTime')"></EdDateTimePicker> -->
                        <el-date-picker v-model="form.licenseTime" type="date" placeholder="选择日期" :format="pickerParams.valueFormat" :value-format="pickerParams.valueFormat" @change="emitEchoTimeDate($event, 'licenseTime')"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="联系人" class="width-m25" prop="contactName">
                        <el-input class="flex-input" placeholder="请输入" v-model="form.contactName" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" class="width-m25" prop="contactPhone" :rules="$validate.validates({ type: 'mobile' })">
                        <el-input class="flex-input" placeholder="请输入" v-model="form.contactPhone"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="营业执照ID" class="width-m25" prop="licenseNo" :rules="$validate.validates({ type: 'license' })"> -->
                    <el-form-item label="营业执照ID" class="width-m25" prop="licenseNo">
                        <el-input class="flex-input" placeholder="请输入" v-model="form.licenseNo" maxlength="18"></el-input>
                    </el-form-item>
                    <el-form-item label="联系地址" class="width-m25" prop="contactAddress">
                        <el-input class="flex-input" placeholder="请输入" v-model="form.contactAddress" maxlength="20"></el-input>
                    </el-form-item>
                </div>
            </EdCreateCard>

            <EdCreateCard title="证件照片">
                <div class="zh_auto img_center">
                    <el-form-item>
                        <p class="labelFont">营业执照照片</p>
                        <WisdomUploadSingle v-model="form.licenseUrl" @pic-url="picUrl($event, 'licenseUrl')" @pic-del="picDel('licenseUrl')" ref="edUploadSingle"></WisdomUploadSingle>
                    </el-form-item>
                    <el-form-item>
                        <p class="labelFont">法人手持身份证照片</p>
                        <WisdomUploadSingle v-model="form.idCardUrl" @pic-url="picUrl($event, 'idCardUrl')" @pic-del="picDel('idCardUrl')" ref="edUploadSingle_2"></WisdomUploadSingle>
                    </el-form-item>
                </div>
                <el-form-item class="form_btns">
                    <el-button class="ed-button ed_black-bottom" @click="onSubmit('formRef')" :loading="disabled">确定</el-button>
                    <el-button class="ed-button ed_white_bottom" @click="$utilsSet.goBack($router)">取消</el-button>
                </el-form-item>
            </EdCreateCard>
        </el-form>
    </div>
</template>

<script>
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import EdDateTimePicker from 'src/components/EdDateTimePicker.vue'
    import WisdomUploadSingle from "src/components/WisdomUploadSingle.vue";
    import { defineComponent } from 'vue'
    import { detailCompany, companyAdd, companyUpdate } from "./api";
    export default defineComponent({
        name: "companyCreate",
        components: { EdCreateCard, EdDateTimePicker, WisdomUploadSingle},
        data(){
            return{
                form:{
                    // orgId: this.$store.getters.vid,
                    // orgName: this.$store.getters.orgName,
                    orgName: '',
                    validTime: '',
                    registerMoney: '',
                    foundedTime: '',
                    legalPerson: '',
                    licenseTime: '',
                    contactName: '',
                    contactPhone: '',
                    licenseNo: '',
                    contactAddress: '',
                    licenseUrl: '',
                    idCardUrl: '',
                },
                pickerParams:{
                    valueFormat:"yyyy-MM-dd"
                },
                disabled:false,
                isUpdate: false,
            }
        },
        activated(){
            if(this.$route.query.id){
                // 编辑 
                this.isUpdate = true;
                this.detailCompany();
            }else {
              
            }
        },
        deactivated(){
            this.form={
                // orgId: this.$store.getters.vid,
                // orgName: this.$store.getters.orgName,
                orgName: '',
                validTime: '',
                registerMoney: '',
                foundedTime: '',
                legalPerson: '',
                licenseTime: '',
                contactName: '',
                contactPhone: '',
                licenseNo: '',
                contactAddress: '',
                licenseUrl: '',
                idCardUrl: '',
            }
            this.$refs.edUploadSingle.setPic('');
            this.$refs.edUploadSingle_2.setPic('');
            this.disabled = false;
            // 清空form值，且清空 校验结果
            this.$refs.formRef.resetFields()
        },
        methods:{
            detailCompany(){
                detailCompany({id:this.$route.query.id}).then(response => {
                    this.$refs.edUploadSingle.setPic(response.data.licenseUrl);
                    this.$refs.edUploadSingle_2.setPic(response.data.idCardUrl);

                    if(response.code == 20000) {
                        this.form = {
                            orgId:response.data.orgId,
                            orgName:response.data.orgName,
                            validTime:response.data.validTime,
                            registerMoney:response.data.registerMoney,
                            foundedTime:response.data.foundedTime,
                            legalPerson:response.data.legalPerson,
                            licenseTime:response.data.licenseTime,
                            contactName:response.data.contactName,
                            contactPhone:response.data.contactPhone,
                            licenseNo:response.data.licenseNo,
                            contactAddress:response.data.contactAddress,
                            licenseUrl: response.data.licenseUrl,
                            idCardUrl: response.data.idCardUrl,
                        };
                    }
                })
            },
            emitEchoTimeDate($event, name){
                // $event 子组件$emit传的参数 
                // console.log('date--->', $event, name)
               this.form[name]=$event?$event:'';
            },
            picUrl($event, name){
                this.form[name] = $event
            },
            picDel(name){
               this.form[name]='';
            },
            onSubmit(formName){
                // 去空格
                this.form['orgName']=this.form['orgName'].trim();
                this.$refs[formName].validate((valid) => {
                    if(valid){
                        this.disabled = true;
                        let query = this.form.copy();
                        if(this.isUpdate){
                            companyUpdate(query).then(response => {
                                if(response.code == 20000) {
                                    this.disabled = false;
                                    this.$message.success({
                                        message: '保存成功',
                                        center: true,
                                        duration: 2000,
                                    });
                                    // this.form.id = response.data;
                                    if(this.$route.query.type !=0){
                                        window.setTimeout(() => {
                                            this.$utilsSet.goBack(this.$router);
                                        }, 600)
                                    }
                                }else {
                                    this.disabled = false
                                }
                            }).catch(()=>{
                                this.disabled = false
                            })
                        }else{
                            companyAdd(query).then(response => {
                                if(response.code == 20000) {
                                    this.disabled = false;
                                    this.$message.success({
                                        message: '添加成功',
                                        center: true,
                                        duration: 2000,
                                    });
                                    // this.form.id = response.data;
                                    if(this.$route.query.type !=0){
                                        window.setTimeout(() => {
                                            this.$utilsSet.goBack(this.$router);
                                        }, 600)
                                    }
                                }else {
                                    this.disabled = false
                                }
                            }).catch(()=>{
                                this.disabled = false
                            })
                        }
                    }
                })
            },
        }
    })
</script>

<style scoped lang="scss">
    :deep {
        .el-form-item{
            .el-form-item__content{
                .el-input{
                    width: 100%;
                    min-width: 230px !important;
                    // input{
                    //     width: 230px !important;
                    // }
                }
            }
        }
        // .money_class{
        //     width: 25%;
        //     .el-form-item__content{
        //         .el-input{
        //             position: relative;
        //             input{
        //                 // width: 162px !important;
        //             }
        //             .el-input-group__append{
        //                 position: absolute;
        //                 top: 0;
        //                 width: 47px;
        //                 left: 183px;
        //                 height: 40px;
        //                 line-height: 40px;
        //                 // transform: translateX(-49px);
        //                 // border-radius: 0;
        //                 padding: 0 10px;
        //             }
        //         }
        //     }
        // }
    }
    .img_center{
        display: flex;
        align-items: center;
    }
    .form_btns{
        // display: flex;
        // justify-content: flex-end;
        margin-left: 47px;
    }
    // .zh_flex{
    //     .el-form-item{
    //         flex: 1;
    //     }
    // }
</style>